<template>
    <view class="money-img-product-scroll-container">
      <scroll-view scroll-x class="money-img-product-list">
        <view class="money-img-product-item" v-for="(item, index) in productList" :key="index">
          <view class="money-img-product-image" @click="handleAddClick(item)">
            <image :src="item.goods_image" :mode="aspectFill" />
          </view>
          <view class="money-img-product-info" @click="handleAddClick(item)">
            <view class="money-img-product-title">{{ item.goods_name }}</view>
            <view class="money-img-product-price-section">
              <view >
                <view>
                  <text style="color: #D03A3A;font-size: 20rpx;">¥</text>
                  <text class="money-img-product-price">{{ item.online_price }}</text>
                </view>
                <view class="temperature-box" v-if="item.rebate > 0">
                  {{ item.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
                </view>
              </view>
              <view class="money-img-product-add-btn  icontext qh-rt-single qh-rt-a-zu4423 car-num-icon add" @click="handleAddClick(item)"></view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'MoneyImgProductScroll',
    props: {
      productList: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      handleAddClick(item) {
        this.$emit('on-add', item)
      }
    }
  }
  </script>
  
<style scoped lang="scss">

.temperature-box {
	 background-color: #C39646;
	 border-radius: 16rpx 16rpx 16rpx 16rpx;
	 color: #FFFFFF; 	 	 	 	 	 	/* 白色文字 */
	 font-size: 20rpx; 	 	 	 	 	/* 文字大小 */
	 height: 28rpx;
	 text-align: center;
	 padding: 5rpx;
	 line-height: 28rpx;
	 }
.money-img-product-scroll-container {
  width: 100%;
}

.money-img-product-list {
  width: 100%;
  white-space: nowrap;
  padding:10rpx 20rpx;
  box-sizing: border-box;
}

.money-img-product-item {
  display: inline-block;
  width: 240rpx;
  height: 400rpx;
  margin-right: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background: #fff;
  border: 1rpx solid #E0B879;
}


.money-img-product-image {
  width: 100%;
  height: 260rpx;
  font-size: 0;
  padding: 20rpx;
  box-sizing: border-box;
}

.money-img-product-image image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12rpx;
}

.money-img-product-info {
  padding: 12rpx 20rpx;
  height: 140rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.money-img-product-title {
  font-size: 28rpx;
  // line-height: 36rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  // max-height: 72rpx;
  width: 100%;
  word-break: break-all;
  white-space: normal;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.money-img-product-price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.money-img-product-price {
  color: #D03A3A;
  font-size: 32rpx;
  font-weight: bold;
}

.money-img-product-add-btn {
  width: 48rpx;
  height: 48rpx;
  background-color: #D03A3A;
  color: #E0B879;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
}
</style>